<template>
  <view class="tiezishangchun">
    <view class="top">
      <image src="../../static/businessImg/back.png" class="topback" @click="back">
      </image>
      <view class="topname"> 帖子上传 </view>
    </view>

    <view class="tiezishangchuancenter">
      <view class="tiezishangchuancenterform">
        <u-form :model="form" ref="uForm" label-position="left" label-width="150">
          <u-form-item label="发布类型">
            <u-input v-model="form.kuaidigongsi" type="select" @click="shows = true" placeholder="选择类型" />
          </u-form-item>

          <u-form-item label="标题">
            <u-input v-model="form.title" placeholder="输入你的标题" />
          </u-form-item>

          <view @click="navigateTo(`/pages/business/productlist?from=${from}`)" v-if="form.kuaidigongsi == '产品链接'">
            <u-form-item label="选择产品">
              <u-input disabled placeholder="" />
              <u-icon name="arrow-right" color="#f3f3f3"></u-icon>
            </u-form-item>
          </view>

          <view class="productcneteritem" v-for="item in selected" :key="item.id">
            <image :src="item.image" class="productcneteritemimg"></image>

            <view class="productcneteritemname">
              {{ item.name }}
            </view>

            <view class="productcneteritemprice"> ￥ {{ item.price }} </view>
          </view>
          <view class="zhengwen"> 正文 </view>

          <view class="textview">
            <u-input style="
                background: rgb(242, 242, 242);
                text-align: left;
                border-radius: 10rpx;
                padding: 5rpx;
              " v-model="form.content" type="textarea" maxlength="10000" placeholder="" />
          </view>

          <view class="uploadingview" v-if="form.kuaidigongsi == '图文类型'">
            <view class="imageimg" v-for="(item, index) in images" :key="index">
              <image :src="item" style="width: 210rpx; height: 210rpx"></image>
              <view class="deldiv" @click="delimages(index)"> </view>
            </view>
            <view class="imageimg" @click="choosepic" v-if="images.length < 9">
              <image src="../../static/businessImg/add.png" mode="" style="width: 210rpx; height: 210rpx"></image>
            </view>
          </view>
        </u-form>

        <view class="lijifabu" @click="lijifabu"> 立即发布 </view>
      </view>
    </view>

    <u-action-sheet :list="actionSheetList" v-model="shows" @click="actionSheetCallback">
    </u-action-sheet>

    <u-modal v-model="show" confirm-text="确认" cancel-text="取消" title="立即发布" :show-cancel-button="true" width="618"
      :async-close="true" @confirm="confirm" :cancel-style="cancelstyleobj" :confirm-style="confirmstyleobj"
      :title-style="titleObj">
      <view class="slot-content2"> 确定立即发布此贴 </view>
    </u-modal>
  </view>
</template>

<script>
import { addPosts } from "@/api/storeAdmin.js";

import storage from "@/utils/storage.js";
export default {
  data() {
    return {
      form: {
        kuaidigongsi: "",
        title: "",
        content: "",
      },
      shows: false,
      actionSheetList: [
        {
          text: "图文类型",
          value: "1",
        },
        {
          text: "产品链接",
          value: "2",
        },
      ],
      images: [],
      selected: [],
      show: false,
      titleObj: {
        "font-family": "Source Han Sans CN",
        "font-weight": "500",
        "font-size": "53rpx",
        color: "#151F38",
      },
      cancelstyleobj: {
        width: "260rpx",
        height: "77rpx",
        "border-radius": "35rpx",
        "line-height": "77rpx",
        color: "#ffffff",
        "text-align": "center",
        "font-size": "28rpx",
        "background-color": "rgb(216,216,216)",
      },
      confirmstyleobj: {
        width: "260rpx",
        height: "77rpx",
        "border-radius": "35rpx",
        "line-height": "77rpx",
        color: "#ffffff",
        "text-align": "center",
        "font-size": "28rpx",
        "background-color": "rgb(146,207,56)",
        "margin-left": "33rpx",
      },

      from: "",
    };
  },

  onLoad(option) {
    this.from = option.from;
  },

  methods: {
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },

    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },

    actionSheetCallback(val) {
      this.$set(this.form, "kuaidigongsi", this.actionSheetList[val].text);
    },

    setData(obj) {
      this.selected = [{ ...obj.someData }];
    },

    choosepic() {
      const num = 9 - this.images.length;
      const that = this;
      uni.chooseImage({
        count: num,
        sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
        sourceType: ["album", "camera"], //从相册选择
        success: function (res) {
          const filePath = res.tempFilePaths;
          // that.images = filePath

          filePath.forEach((i) => {
            uni.uploadFile({
              url: "http://yzfl.ss5.tunnelfrp.com/yzfl/user/uploadImage", // 服务器上传接口
              filePath: i,
              name: "file", // 必须填写，后台用来接收文件

              success: function (uploadFileRes) {
                console.log(uploadFileRes.data);
                that.images.push(JSON.parse(uploadFileRes.data).data);
              },
              fail: function (uploadFileErr) {
                console.log(uploadFileErr); // 上传失败后的操作
              },
            });
          });
        },
      });
    },

    delimages(index) {
      let arr = this.images;
      arr.splice(index, 1);
      this.images = arr;
    },
    confirm() {
      let params = {};
      params.title = this.form.title;
      params.content = this.form.content;
      params.type = this.form.kuaidigongsi == "图文类型" ? 1 : 2;
      params.id = storage.getUserInfo().storeId;

      if (this.form.kuaidigongsi == "图文类型") {
        if (this.images != []) {
          params.image = this.images.join(",");
        } else {
          params.image = "";
        }
      }

      if (this.form.kuaidigongsi == "产品链接") {
        params.productId = this.selected[0].id;
      }
      addPosts({ ...params }).then((res) => {
        uni.showToast({
          icon: "success",
          title: "新增成功",
        });

        this.form.kuaidigongsi == "图文类型";
        this.form.title = "";
        this.form.content = "";
        this.images = [];
        this.selected = [];
        this.show = false;
      });
    },
    lijifabu() {
      if (this.form.kuaidigongsi == "") {
        return uni.showToast({
          icon: "none",
          title: "请选择发布类型",
        });
      }
      if (
        this.form.title == "" ||
        this.form.title == null ||
        this.form.title == undefined
      ) {
        return uni.showToast({
          icon: "none",
          title: "请输入标题",
        });
      }

      if (this.form.kuaidigongsi == 2 && this.selected == []) {
        return uni.showToast({
          icon: "none",
          title: "请选择产品",
        });
      }

      this.show = true;
    },
  },
};
</script>

<style scoped>
.tiezishangchun {
  width: 100%;
  min-height: 100vh;
}

.top {
  width: 100%;
  height: 188rpx;
  position: relative;
  background: #ffffff;
}

.topback {
  width: 16rpx;
  height: 29rpx;
  position: absolute;
  top: 106rpx;
  left: 32rpx;
}

.topname {
  width: 300rpx;
  height: 32rpx;
  text-align: center;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 33rpx;
  color: #222222;
  line-height: 32rpx;
  position: absolute;
  top: 104rpx;
  left: 50%;
  transform: translateX(-50%);
}

.tiezishangchuancenter {
  width: 100%;
  padding: 24rpx;
}

.tiezishangchuancenterform {
  width: 100%;
  background: #ffffff;
  padding: 24rpx;
}

::v-deep .u-input__input {
  text-align: right;
}

::v-deep .u-input--border {
  border: none !important;
}

::v-deep .u-form-item {
  border-bottom: 2rpx solid #f3f3f3;
}

::v-deep .uni-textarea-wrapper {
  text-align: left;
}

.zhengwen {
  height: 100rpx;
  line-height: 100rpx;
}

::v-deep .u-input__textarea {
  border-radius: 10rpx;
}

.uploadingview {
  margin-top: 50rpx;
  width: 100%;
  /* background: red; */
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.imageimg {
  position: relative;
  width: 218rpx;
  height: 218rpx;
  padding: 15rpx;
  margin-bottom: 15rpx;
  /* margin-right: 10rpx; */

  image {
    width: 100%;
    height: 100%;
  }
}

.deldiv {
  width: 31rpx;
  height: 31rpx;
  background: url("../../static/businessImg/del.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: -10rpx;
  right: -10rpx;
}

.lijifabu {
  width: 100%;
  height: 90rpx;
  line-height: 90rpx;
  text-align: center;
  margin-top: 46rpx;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 43rpx;
  color: #ffffff;
  background: rgb(148, 207, 57);
  border-radius: 45rpx;
}

.productcneteritem {
  width: 100%;
  height: 160rpx;
  position: relative;
  margin-bottom: 30rpx;
}

.productcneteritemimg {
  width: 160rpx;
  height: 160rpx;
  position: absolute;
  top: 0;
  left: 0;
}

.productcneteritemname {
  width: 462rpx;
  font-family: PingFang;
  font-weight: bold;
  font-size: 26rpx;
  color: #151f38;
  position: absolute;
  top: 10rpx;
  left: 180rpx;
}

.productcneteritemprice {
  width: 300rpx;
  position: absolute;
  bottom: 5rpx;
  left: 180rpx;
  font-family: PingFang;
  font-weight: 500;
  font-size: 24rpx;
  color: #ff3a3a;
}

.productcneteritembtn {
  width: 105rpx;
  height: 45rpx;
  text-align: center;
  line-height: 45rpx;
  background: rgb(148, 207, 57);
  border-radius: 25rpx;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 32rpx;
  color: #ffffff;
  position: absolute;
  bottom: 5rpx;
  right: 40rpx;
}

.slot-content2 {
  height: 145rpx;
  line-height: 145rpx;
  text-align: center;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 38rpx;
  color: #707070;
}

::v-deep .u-model__footer {
  justify-content: space-around;
  /* padding-bottom: 20rpx; */
  height: 100rpx;
  align-items: center;
}
</style>
